<template>

    <ph-divider type="primary">基本展示</ph-divider>
    <ph-button-group :container="true">
        <ph-button @click="open('success')" type="success">成功</ph-button>
        <ph-button @click="open('danger')" type="danger">错误</ph-button>
        <ph-button @click="open('info')" type="info">信息</ph-button>
        <ph-button @click="open('warning')" type="warning">警告</ph-button>
        <ph-button @click="open('hello world')">default</ph-button>
    </ph-button-group>
    <ph-divider type="primary">position:right-top</ph-divider>
    <ph-button-group :container="true">
        <ph-button @click="open1('success','right-top')" type="success">成功</ph-button>
        <ph-button @click="open1('danger','right-top')" type="danger">错误</ph-button>
        <ph-button @click="open1('info','right-top')" type="info">信息</ph-button>
        <ph-button @click="open1('warning','right-top')" type="warning">警告</ph-button>
    </ph-button-group>
    <ph-divider type="primary">position:left-top</ph-divider>
    <ph-button-group :container="true">
        <ph-button @click="open1('success','left-top')" type="success">成功</ph-button>
        <ph-button @click="open1('danger','left-top')" type="danger">错误</ph-button>
        <ph-button @click="open1('info','left-top')" type="info">信息</ph-button>
        <ph-button @click="open1('warning','left-top')" type="warning">警告</ph-button>
    </ph-button-group>
    <ph-divider type="primary">position:left-bottom</ph-divider>
    <ph-button-group :container="true">
        <ph-button @click="open1('success','left-bottom')" type="success">成功</ph-button>
        <ph-button @click="open1('danger','left-bottom')" type="danger">错误</ph-button>
        <ph-button @click="open1('info','left-bottom')" type="info">信息</ph-button>
        <ph-button @click="open1('warning','left-bottom')" type="warning">警告</ph-button>
    </ph-button-group>
    <ph-divider type="primary">autoClose|clickable|自定义icon</ph-divider>
    <ph-button-group :container="true">
        <ph-button @click="onClickable">clickable</ph-button>
        <ph-button @click="onAutoClose">自动关闭</ph-button>
        <ph-button @click="onCustomIcon">自定义icon</ph-button>
    </ph-button-group>
</template>
<script lang="ts" setup>
import { defineComponent, getCurrentInstance } from "vue";
import { PhButton, PhButtonGroup, PhDivider} from "@/index";
import Notification,{ PhNotifyType } from "ph-notification";
import PhToast from 'ph-toast'
const ins = getCurrentInstance()
const open = (type:string)=>{
    const openFn = (Notification as any)[type]
    if(openFn)openFn(type)
    else Notification.notify(type)
}
const open1 = (type:string,position:string)=>{
    const openFn = (Notification as any)[type]
    if(openFn)openFn(type,{position})
}
const onClickable = () => {
    Notification
    .notify("这是可以点击的通知", {
        clickable: true,
    })
    .click(() => {
        PhToast.show("你点击了这个通知");
    })
    .close((a: any, b: any) => {
        console.log(a, b);
        if (a) PhToast.show("通知关闭事件");
    });
};
const onAutoClose = () => {
    Notification.notify("这是个10s后自动关闭的通知", {
        autoClose: true,
    });
}
const onCustomIcon = ()=>{
    Notification.notify("icon:fa-chrome,iconClass:fa,iconColor:red", {
        title:"自定义icon",
        icon:"fa-chrome",
        iconClass:"fa",
        iconColor:"red"
    })
}
</script>
